<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>预约</title>
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/mui.min.css" />
		<link rel="stylesheet" href="../../../css/iconfont.css" />
		<link rel="stylesheet" href="../../../css/cmms.css" />
		<link rel="stylesheet" href="../../../css/sale/bespeak/bespeak.css" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<body>
		<div class="mui-content" id="bespeak" v-cloak>
		    <div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						待确认{{unconfNum}}
					</a>
					<a class="mui-control-item" href="#item2mobile">
						已确认{{confNum}}
					</a>
				
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<section class="panel confirmPanel" v-for="c in unconfirmData">
									<div>
										<div class="overflow">
											<span class="left">{{c.doctorName}}</span>
											<span class="right">{{c.appointmentTime|replaceT}}</span>
										</div>
										<p>{{c.hospitalName}}</p>
									</div>
									<div class="overflow">
										<i class="iconfont icon-dizhi left"></i>
										<div class="left">{{c.hospitalAddress}}</div>
									</div>
									<!--新加备注信息-->
									<div class="overflow">
										<div class="left">备注信息{{c.hospitalAddress}}</div>
									</div>
									<div class="overflow"> 
										<span>上门时间  {{c.appointmentPreiod}}</span>
										<span class="btn-primary right" @tap="confirmBespeak(c.id)">确认预约</span>
										<a :href="'tel:'+c.doctorPhone" class="right"><span class="btn-order-detail">联系医生</span></a>
									</div>
								</section>
								<footer class="nomore" v-show="unconfirmData.length>0">
									<span></span>
									<span>没有更多了</span>
									<span></span>
								</footer>
								<div class="noData" v-show="!unconfirmData.length>0">
									<p><img src="../../../img/nodata.png"/></p>
									<p>暂无内容</p>
								</div>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<section class="panel confirmPanel" v-for="u in confirmData">
									<div>
										<div class="overflow">
											<span class="left">{{u.doctorName}}</span>
											<span class="right">{{u.confirmedTime|replaceT}}</span>
										</div>
										<p>{{u.hospitalName}}</p>
									</div>
									<div class="overflow">
										<i class="iconfont icon-dizhi left"></i>
										<div class="left">{{u.hospitalAddress}}</div>
									</div>
									<!--新加备注信息-->
									<div class="overflow">
										<div class="left">备注信息{{u.hospitalAddress}}</div>
									</div>
									<div class="overflow"> 
										<span>{{u.appointmentPreiod}} 已确认</span>
										<a :href="'tel:'+u.doctorPhone" class=" right ">
											<span class="btn-order-detail noMarginRight">联系医生</span>
										</a>
									</div>
								</section>
								<footer class="nomore" v-show="confirmData.length>0">
									<span></span>
									<span>没有更多了</span>
									<span></span>
								</footer>
								<div class="noData" v-show="!confirmData.length>0">
									<p><img src="../../../img/nodata.png"/></p>
									<p>暂无内容</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/cmms.js?time=333"></script>
		<script>
			new Vue({
				el:"#bespeak",
				data:{
					confirmData:[],
					unconfirmData:[],
					confNum:'',
					unconfNum:''
				},
				mounted(){
//					var vConsole = new VConsole();
					this.muiInit();
					this.getBespeakData(0);
					this.getBespeakData(1);
				},
				methods:{
					muiInit(){
						mui.init({
							swipeBack: false
							
						});
						mui('.mui-scroll-wrapper').scroll({
							indicators: true //是否显示滚动条
						});
					},
					getBespeakData(state){
						let _this = this;
						AT.muiAjax('/partner-sale/appointment/getAppointment','post',{state},function(res){
							
							if(state === 1){
								_this.confirmData = res;
								switch (_this.confirmData.length){
									case 0:
										_this.confNum = '';
										break;
									default:
										_this.confNum = '('+_this.confirmData.length+')';
										break;
								}
							}else{
								_this.unconfirmData = res;
								switch (_this.unconfirmData.length){
									case 0:
										_this.unconfNum = '';
										break;
									default:
										_this.unconfNum = '('+_this.unconfirmData.length+')';
										break;
								}
							}
						})
					},
					//确认预约
					confirmBespeak(id){
						let _this = this;
						mui.confirm('请确认是否接受此次预约？','确认预约',['暂不接受','接受'],function(c){
							if(c.index === 1){
								AT.muiAjax('/partner-sale/appointment/updAppointment','post',{id},function(data){
									mui.toast(data);
									_this.getBespeakData(0);
									_this.getBespeakData(1);
								})
							}
						})
					}
				}
			})
		</script>
	</body>
</html>
